<template>
  <view class="yu-datetime-picker">
    <view class="time" v-if="showValue">
      <view class="time_info">
        {{ todayDate == currentDate ? '今天' : currentDate }} {{ time }}
      </view>
    </view>
    <view class="yu-datetime-view">
      <picker-view :indicator-style="itemHeight" :value="dateValues" @change="bindDateChange"
        indicator-class="picker-box">
        <!-- <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in months" :key="index">{{ item}}月</view>
        </picker-view-column>
        <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in days" :key="index">{{ item}}日</view>
        </picker-view-column> -->
        <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
        </picker-view-column>
        <picker-view-column class="yu-picker-column1">
          <view class="yu-datetime-item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
        </picker-view-column>
      </picker-view>
    </view>
   <!-- <view class="btnBox">
      <view class="con_btn" @click="confirm()">确认</view>
    </view> -->
  </view>
</template>

<script setup>
  import {
    nextTick,
    ref,
    onMounted,
    computed,
    watch
  } from 'vue'
  import dayjs from 'dayjs'
  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    showValue: {
      type: Boolean,
      default: true,
    },
  })

  import {
    formatDate,
    showToast
  } from '@/utils'
  const dates = ref([])
  const days = ref([])
  const months = ref([])
  const hours = ref([])
  const minutes = ref([])
  const time = ref('')
  const dateValues = ref([1, 1])
  const itemHeight = ref(`height: 88rpx`)
  const emit = defineEmits(['confirm', 'cancel', 'changeTime'])
  const visible = ref(true)
  const indicatorStyle = ref('')
  const todayDate = ref('')
  const currentDate = ref('')
  const confirm = () => {
    emit('confirm', {
      time: `${currentDate.value} ${time.value}`
    })
  }

  const cancel = () => {
    // emit('cancel')
  }
  onMounted(async () => {
    console.log(todayDate.value, 111)
    const date = new Date()
    days.value=await getDays(date)
    let res = await init()
    console.log(props.value)
    if (props.value) {
      let str = props.value.split(' ')
      let str1 = str[1].split(':')
      time.value = str[1]
      let month = dayjs(props.value).format('MM');
      let day = dayjs(props.value).format('DD');
      console.log(month)
      console.log(months.value)
      let index1 = months.value.findIndex((v) => v == month) //月
      let index2 = days.value.findIndex((v) => v == day)    //日
      let index3 = hours.value.findIndex((v) => v == str1[0])      //时
      let index4 = minutes.value.findIndex((v) => v == str1[1])    //分
      currentDate.value = str[0]
      nextTick((_) => {
        dateValues.value = [index1, index2, index3,index4]
      })
      console.log(index1)
    } else {
      // time.value = dayjs().format("HH:mm")
    }
  })
  async function init() {
    for (let i = 1; i < 13; i++) {
      let str = i
      if (i < 10) {
        str = '0' + str
      } else {
        str = '' + str
      }
      months.value.push(str)
    }
    for (let i = 0; i < 24; i++) {
      let str = i
      if (i < 10) {
        str = '0' + str
      } else {
        str = '' + str
      }
      hours.value.push(str)
    }
    for (let i = 0; i < 60; i++) {
      let str = i
      if (i < 10) {
        str = '0' + str
      } else {
        str = '' + str
      }
      minutes.value.push(str)
    }
  }
  const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

  function getWeekday(date) {
    const weekday = dayjs(date).day();
    return weekdayNames[weekday];
  }

  async function getDays(date){
    let endday=dayjs(date).endOf('month').format('D');
    // let starday=dayjs().startOf('month').format('D');
    let endday1=Number(endday)
    let daysArr=[]
    for (let i = 1; i < endday1+1; i++) {
      let str = i
      if (i < 10) {
        str = '0' + str
      } else {
        str = '' + str
      }
      daysArr.push(str)
    }
    return daysArr
    console.log(day)
    // dayjs().startOf('month').format('YYYY-MM-DD');
  }

  console.log(getWeekday('2022-12-25'));
  async function getLastYearToTodayDates() {
    let today = new Date()
    let startDate = new Date(today.getFullYear(), 0, 1)
    let dates = []
    let last = new Date(dayjs().add(30, 'day').format())
    console.log(last)
    console.log(today)
    todayDate.value = formatDate(Date.now(), 'YYYY-MM-DD')
    while (startDate <= last) {
      let date1 = formatDate(startDate, 'MM月DD日')
      let date2 = formatDate(startDate, 'YYYY-MM-DD')
      let week = await getWeekday(date2)
      console.log(week)
      let data3 = date1 + ' ' + week
      dates.push({
        label: data3,
        value: date2
      })
      startDate.setDate(startDate.getDate() + 1)
    }
    return dates
  }

  function bindDateChange(e) {
    if(e){
      console.log(e)
    }
    let value = e.detail.value
      console.log(months.value)
      console.log(value)
    // currentDate.value =`${months.value[value[0]]}-${days.value[value[1]]}`
    time.value = `${hours.value[value[0]]}:${minutes.value[value[1]]}`
    nextTick(()=>{
      let newStr = `  ${time.value}`
      console.log(newStr)
       emit('changeTime', newStr)
    })


  }

  function pickerChange(e) {
    console.log(e)
  }
</script>
<style>
  /* .yu-datetime-picker .picker-box {
  background: #f8f2ff;
  z-index: 0;
} */
</style>

<style lang="scss" scoped>
  .yu-datetime-picker {
    position: relative;
    z-index: 888;
  }

  .yu-datetime-view {
    width: 100%;
    height: 400rpx;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    z-index: 666;
    box-sizing: border-box;
    padding: 0 25rpx;
  }

  .yu-datetime-view picker-view {
    height: 100%;
  }

  .yu-datetime-view picker-view {
    height: 100%;
  }

  ::v-deep .uni-picker-view-indicator {
    background: #F5F6F8;
    z-index: 0;
  }

  .yu-picker-column {
    -webkit-flex: 2;
    -webkit-box-flex: 2;
    flex: 2;
  }

  .yu-picker-column1 {
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }

  .yu-datetime-item {
    text-align: center;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 34rpx;
    color: #333333;
  }

  .time {
    padding: 50rpx 0 50rpx 0;
    display: flex;
    justify-content: center;

    .time_info {
      font-weight: 600;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .btnBox {
    padding: 6rpx 0;

    .con_btn {
      width: 700rpx;
      height: 88rpx;
      background: #00C1B9;
      border-radius: 44rpx;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      margin: 0 auto;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
</style>
